import echarts from "echarts";
const option = {
    title: [
        {
            text: '下载量',
            x: 'center',
            top: '52%',
            textStyle: {
                fontSize: 16,
                fontWeight: '300',
                color: 'rgba(255, 255, 255, 0.3)',
            }
        },
        {
            text: '100',
            x: 'center',
            top: '40%',
            textStyle: {
                fontSize: 25,
                fontWeight: '300',
                color: '#fff',
            }
        }
    ],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        textStyle: {
            fontSize: 10
        },
    },
    color: ['#45494b', '#32b16c'],
    legend: {
        show: false,
        orient: 'horizontal',
        left: 'center',
        bottom: 0,
        data: ['类别一', '类别二', '类别三', '类别四'],
        textStyle: {
            color: '#fff'
        },
        icon: 'path://M512 0c282.752 0 512 229.248 512 512s-229.248 512-512 512S0 794.752 0 512 229.248 0 512 0z m0 85.333333C276.352 85.333333 85.333333 276.352 85.333333 512s191.018667 426.666667 426.666667 426.666667 426.666667-191.018667 426.666667-426.666667S747.648 85.333333 512 85.333333z m0 213.333334a213.333333 213.333333 0 1 1 0 426.666666 213.333333 213.333333 0 0 1 0-426.666666z'
    },

    angleAxis: {
        max: 100,
        show: false,
        startAngle: 0,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false
        }
    },
    polar: {
        radius: ["50%", "60%"],
        center: ['50%', '50%']
    },
    color: ["#2478b6", "#c2572d", "#66CCCC"],
    series: [
        {
            name: '',
            type: 'gauge',
            splitNumber: 12,
            center: ['50%', '50%'],
            radius: '72%',
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                lineStyle: {
                    width: 1.5,
                    color: '#027797',
                },
                length: 10,
                splitNumber: 3
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        },
        {
            name: '',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: '60%',
            axisLine: {
                lineStyle: {
                    color: [[1, new echarts.graphic.LinearGradient(
                        0.5, 0, 0.5, 1, [{
                            offset: 0,
                            color: '#054388'
                        }, {
                            offset: 1,
                            color: '#007a9c'
                        }]

                    )]],
                    width: 5
                },

            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            itemStyle: {
                show: false
            },
            detail: {
                show: false
            }
        },
        {
            name: '',
            type: 'gauge',
            splitNumber: 12,
            center: ['50%', '50%'],
            radius: '43%',
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
                show: false
            },
            axisTick: {
                show: true,
                lineStyle: {
                    width: 5,
                    color: '#027797',
                },
                length: 1,
                splitNumber: 3
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            detail: {
                show: false
            }
        }

    ]
}
// function create() {
//     const config = {
//         name: '',
//         type: 'custom',
//         coordinateSystem: "none",
//         data: [0],
//     }
//     const paramsArr = [{
//         r: 0.75,
//         startAngle: 230,
//         endAngle: 260,
//         lineWidth: 2
//     }];
//     paramsArr.forEach(item => {
//         const data = {
//             ...config,
//             renderItem: function (params, api) {
//                 return {
//                     type: 'arc',
//                     style: {
//                         stroke: '#56595a',
//                         fill: 'transparent',
//                         lineWidth:item.lineWidth?item.lineWidth:5
//                     },
//                     shape: {
//                         cx: api.getWidth() / 2,
//                         cy: api.getHeight() / 2,
//                         r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.5,
//                         startAngle: (item.startAngle) * Math.PI / 180,
//                         endAngle: (item.endAngle) * Math.PI / 180
//                     },
//                 }
//             }
//         };
//         option.series.push(data);
//     })

// }
// create();

export default option;



export function handlerOptions(chart, newConfig) {
    if (newConfig && (Object.keys(newConfig).length !== 0)) {
        chart.setOption({ ...newConfig }, false);
        console.log(chart.getOption());
    }
}